<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="n1">

    <select v-model="opt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" v-model="n2">
    <input type="button" value="=" @click="calculate2">
    <input type="text" v-model="calculate2()">


</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            n1: 0,
            n2: 0,
            opt: "+",
            result: 0
        },
        methods:{
            // calculate(){
            //     switch (this.opt) {
            //         case "+":
            //             this.result = parseInt(this.n1) + parseInt(this.n2)
            //             break
            //         case "-":
            //             this.result = parseInt(this.n1) - parseInt(this.n2)
            //             break
            //         case "*":
            //             this.result =  parseInt(this.n1) * parseInt(this.n2)
            //             break
            //         case "/":
            //             this.result =  parseInt(this.n1) / parseInt(this.n2)
            //             break
            //     }
            // },

            //这里calculate2使用的是焦点移除时候 开始计算。
            //8.19改了一下，直接用在最后结果的输入框绑定计算函数，结果==calculate2()。。这个括号不能少
            calculate2(){
              var codeStr = "parseInt(this.n1) " + this.opt+" parseInt(this.n2)"
              this.result = eval(codeStr)
              return this.result
            }
        }

    })

</script>
</body>
</html>